<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Radio, RadioGroup, TypographyParagraph } from 'ant-design-vue';
import { Colon, Icon, Modal, Select } from '@xcan-angus/vue-ui';
import { http, TESTER } from '@xcan-angus/infra';

// Import composable
import { useExecTest } from './composables/useExecTest';

const { t } = useI18n();

type Props = {
  projectId: string;
  userInfo: { id: string; };
  appInfo: { id: string; };
  visible: boolean;
  scenarioId: string;
  scriptId: string;
  tips: string;
  okAction: string;
  title?: string;
}

const props = withDefaults(defineProps<Props>(), {
  projectId: undefined,
  userInfo: undefined,
  appInfo: undefined,
  visible: false,
  scenarioId: undefined,
  scriptId: undefined,
  tips: undefined,
  okAction: undefined,
  title: undefined
});

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void;
  (e: 'ok', value: any): void;
}>();

// Initialize composable
const {
  checkedType,
  confirmLoading,
  selectedIds,
  selectedServers,
  radioChange,
  selectChange,
  reset,
  getParams
} = useExecTest();

// Event handlers
const cancel = () => {
  reset();
  emit('update:visible', false);
};

const ok = async () => {
  const params = getParams();
  if (props.okAction) {
    confirmLoading.value = true;
    const [error] = await http.put(props.okAction, params, { dataType: true });
    confirmLoading.value = false;
    if (error) {
      return;
    }
  } else {
    emit('ok', params);
  };

  reset();
  emit('update:visible', false);
};

// Computed properties
const okButtonProps = computed(() => ({
  disabled: false
}));

const modalTitle = computed(() => props.title || t('scenario.list.execTest.title'));
</script>

<template>
  <Modal
    :visible="props.visible"
    :width="750"
    :confirmLoading="confirmLoading"
    :okButtonProps="okButtonProps"
    :title="modalTitle"
    @cancel="cancel"
    @ok="ok">
    <div class="leading-5">
      <div v-if="!!props.tips" class="text-theme-sub-content mb-2.5">{{ props.tips }}</div>

      <div class="flex items-start mb-2.5">
        <div class="flex items-center flex-shrink-0 mr-2.5 leading-5.5">
          <span>{{ t('scenario.list.execTest.serverConfig') }}</span>
          <Colon />
        </div>
        <RadioGroup
          v-model:value="checkedType"
          name="radioGroup"
          @change="radioChange">
          <Radio value="none">{{ t('scenario.list.execTest.radioOptions.useDefault') }}</Radio>
          <Radio value="checked" :disabled="!props.scenarioId">{{ t('scenario.list.execTest.radioOptions.modifyConfig') }}</Radio>
        </RadioGroup>
      </div>

      <template v-if="checkedType === 'checked'">
        <Select
          v-model:value="selectedIds"
          :action="`${TESTER}/scenario/${props.scenarioId}/test/schema/server`"
          :fieldNames="{ label: 'url', value: 'url' }"
          mode="multiple"
          style="width: 585px;margin-left: 75px;"
          class="mb-3"
          :placeholder="t('scenario.list.execTest.selectServer')"
          @change="selectChange">
          <template #option="record">
            <div class="flex items-center overflow-hidden">
              <div class="truncate" :title="record.url">{{ record.url }}</div>
              <div
                v-if="!record.variables || !Object.keys(record.variables).length"
                class="flex-shrink-0 border border-status-error rounded px-0.5 ml-2 -translate-y-0.25"
                style="color: rgba(245, 34, 45, 100%);line-height: 15px;">
                <span class="inline-block transform-gpu scale-90">{{ t('scenario.list.execTest.noVariables') }}</span>
              </div>
            </div>
          </template>
        </Select>

        <div
          v-if="!!selectedServers.length"
          style="max-height: 380px;"
          class="space-y-2.5 pl-18.75 overflow-auto">
          <div
            v-for="item in selectedServers"
            :key="item['x-xc-id']"
            class="p-2.5 border border-solid border-theme-text-box rounded">
            <div :title="item.url" class="flex items-center text-theme-title font-semibold truncate mb-2">
              <Icon icon="icon-host" class="text-3.5 mr-1.5" />
              <span>{{ item.url }}</span>
            </div>

            <div v-if="false" class="flex items-start leading-4.5 mb-2">
              <div class="flex-shrink-0 text-theme-sub-content mr-2">
                <span>URL</span>
                <Colon />
              </div>
              <TypographyParagraph
                class="break-all"
                :ellipsis="{ rows: 2, expandable: true, symbol: t('common.ellipsis') }"
                :content="item.url" />
            </div>

            <div class="flex items-start leading-4.5 mb-2.5">
              <div v-if="false" class="flex-shrink-0 text-theme-sub-content mr-2">
                <span>{{ t('common.description') }}</span>
                <Colon />
              </div>
              <TypographyParagraph
                v-if="item.description"
                class="break-all"
                :ellipsis="{ rows: 2, expandable: true, symbol: t('common.ellipsis') }"
                :content="item.description" />
              <div v-else>{{ t('common.noDescription') }}</div>
            </div>

            <div v-if="!!item.variables?.length">
              <div v-if="false" class="text-theme-sub-content mb-0.5">{{ t('common.variables') }}</div>
              <div class="space-y-5">
                <div
                  v-for="_variable in item.variables"
                  :key="_variable.id"
                  class="space-y-2 relative variable-item">
                  <div class="flex items-start leading-4.5">
                    <div v-if="false" class="w-10 flex-shrink-0 text-theme-sub-content">
                      <span>{{ t('scenario.list.execTest.labels.name') }}</span>
                      <Colon />
                    </div>
                    <div :title="_variable.name" class="text-theme-title font-semibold flex-1 truncate">
                      <em class="w-1.25 h-1.25 inline-block rounded bg-slate-600 mr-1.25"></em>
                      <span>{{ _variable.name }}</span>
                    </div>
                  </div>

                  <div class="flex items-start leading-4.5">
                    <div v-if="false" class="w-10 flex-shrink-0 text-theme-sub-content">
                      <span>{{ t('common.value') }}</span>
                      <Colon />
                    </div>
                    <div class="flex-1 space-y-1 pl-2.5">
                      <div
                        v-for="_enum in _variable.enum"
                        :key="_enum.id"
                        class="flex items-center justify-between">
                        <div :title="_enum.value" class="truncate flex-1">{{ _enum.value }}</div>
                        <div class="flex items-center leading-5">
                          <div v-if="_enum.value === _variable.default" class="mr-1 text-text-sub-content text-3">
                            {{ t('common.default') }}
                          </div>
                          <Radio
                            size="small"
                            :checked="_enum.value === _variable.default"
                            style="transform: translateY(-4px);"
                            @change="_variable.default = _enum.value" />
                        </div>
                      </div>
                    </div>
                  </div>

                  <div v-if="false" class="flex items-start leading-4.5">
                    <div class="w-10 flex-shrink-0 text-theme-sub-content">
                      <span>{{ t('common.description') }}</span>
                      <Colon />
                    </div>
                    <TypographyParagraph
                      class="break-all"
                      :ellipsis="{ rows: 2, expandable: true, symbol: t('common.ellipsis') }"
                      :content="_variable.description" />
                  </div>
                </div>
              </div>
            </div>
            <div v-else>{{ t('scenario.list.execTest.noVariables') }}</div>
          </div>
        </div>
      </template>
    </div>
  </Modal>
</template>

<style scoped>
.variable-item::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -11px;
  left: 0;
  width: 100%;
  height: 0;
  border-top: 1px dashed var(--border-text-box);
}

.variable-item:last-child::after {
  display: none;
}
</style>
